<template>
  <div class="content">
    <van-index-bar :index-list="indexList">
      <van-index-anchor index="热门" />
      <div class="recommend">
        <template :key="item.cityId" v-for="item in cityDate.hotCities">
          <div class="items" @click="clickCity(item.cityName)">{{ item.cityName }}</div>
        </template>
      </div>
      <div class="list">
        <template v-for="(val, i) in cityDate.cities" :key="i">
          <van-index-anchor :index="val.group" />
          <template v-for="(newVal, index) in val.cities" :key="index">
            <van-cell @click="clickCity(newVal.cityName)" :title="newVal.cityName" />
          </template>
        </template>
      </div>
    </van-index-bar>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router';
import { useCity } from '../../../Pinia/modules/city';
const router = useRouter();
const cityer = useCity()
const props = defineProps(['cityDate']);
// 侧边栏索引
const indexList = computed(() => {
  let list = props.cityDate.cities.map(item => item.group);
  list.unshift('#');
  return list
})
function clickCity(city) {
  // console.log(city);
  cityer.currentCity = city;
  router.back();
}
</script>
<style scoped>
.content {
  padding: 10px;
}

.recommend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-right: 25px;
}

.items {
  width: 70px;
  height: 28px;
  border-radius: 14px;
  font-size: 12px;
  color: #000;
  text-align: center;
  line-height: 28px;
  background-color: #fff4ec;
  margin: 6px 0;
}
</style>